<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>测试 - layui</title>
<link rel="stylesheet" href="easyui/css/layui.css" />
</head>
<body >


	<fieldset class="layui-elem-field layui-field-title">
		<legend>EasyDocs-UI</legend>
	</fieldset>
	<div style="width: 250px; float: left;">
		<div id="test13" class="demo-tree-more"></div>
	</div>
	<div style="width: 100%px; min-width:800px; float: left;">
		
	 	<div style="font-size:16px;" id="methodTags">方法名</div>
		<br/>
  		<div style="font-size:12px;"><span>备注:</span><span id="methodRemark"></span></div>
		<hr/>
		<div style="font-size:16px;">基本信息</div>
		<hr/>
		<div style="background-color: #EEEEEE;">
				<p style="height:30px; line-height: 30px;"><span>请求URL:</span><span id="patterns"></span></p>
				<p style="height:30px;  line-height: 30px;"><span>请求方法:</span><span id="requestMethods"></span></p>
				<p style="height:30px;  line-height: 30px;"><span>Content-Type:</span><span id="contentType"></span></p>
		</div>
		<hr/>
		<div style="font-size:16px;">Query请求参数</div>
		<hr/>
		<div style="background-color: #EEEEEE;">
					<table class="layui-table"  id="QueryParams">
					  <thead>
					    
					  </thead>
					  
					</table>
		</div>
		
		<div style="font-size:16px;">Path请求参数</div>
		<hr/>
		<div style="background-color: #EEEEEE;">
					<table class="layui-table"  id="pathParams">
					  <thead>
					    
					  </thead>
					  
					</table>
		</div>
		
		<div style="font-size:16px;">Body请求参数</div>
		<hr/>
		<div style="background-color: #EEEEEE;">
					<div>
						<p>实例值:</p>
						<div id="bodyVal" style="padding-left: 10px;"></div>
					</div>
					<hr/>
					<table class="layui-table"  id="bodyParams">
					  <thead>
					    
					  </thead>
					  
					</table>
					
		</div>
		
	</div>


	<!-- body 末尾处引入 layui -->
	<script src="easyui/layui.js"></script>


	<script th:inline="javascript">
	var da = [[${data}]]; 
	
	var data1 = JSON.parse(da);
	
</script>
	<script type="text/javascript">
layui.use(function(){
	var tree = layui.tree
	  ,layer = layui.layer
	  ,$ = layui.$
	  ,table = layui.table
	  ,util = layui.util;
	  

	 tree.render({
	      elem: '#test13'
	      ,data: data1
	      ,showLine: false 
	      ,click: function(obj){
	    	     var data =	obj.data;
	    	 
	    	     if(data.isApi ){
	    	    	 var apiName = data.methodInfo.tags;
	    	    	 var mi = data.methodInfo;
		    	     $("#methodTags").text(mi.tags);
		    	     $("#methodRemark").text(mi.remark);
		    	     $("#patterns").text(mi.patterns);
		    	     $("#requestMethods").text(mi.requestMethods);
		    	     $("#contentType").text(mi.contentType);
		    	   
		    	     $("#QueryParams").html("");
		    	     $("#QueryParams").append("<tr><th>参数名</th><th>默认值</th><th>是否必填</th><th>参数类型</th><th>描述说明</th></tr>");
		    	     $.each(mi.queryParams,function(i,j){
		    	    	 	$("#QueryParams").append("<tr><th>"+j.name+"</th><th>"+j.defaultValue+"</th><th>"+j.require+"</th><th>"+j.type+"</th><th>"+j.remark+"</th></tr>")
		    	     });
		    	     
		    	     $("#pathParams").html("");
		    	     $("#pathParams").append("<tr><th>参数名</th><th>默认值</th><th>是否必填</th><th>参数类型</th><th>描述说明</th></tr>");
		    	     $.each(mi.pathParams,function(i,j){
		    	    	 	$("#pathParams").append("<tr><th>"+j.name+"</th><th>"+j.defaultValue+"</th><th>"+j.require+"</th><th>"+j.type+"</th><th>"+j.remark+"</th></tr>")
		    	     });
		    	     
		    	     $("#bodyParams").html("");
		    	     $("#bodyParams").append("<tr><th>参数名</th><th>默认值</th><th>是否必填</th><th>参数类型</th><th>描述说明</th></tr>");
		    	     $.each(mi.bodyParams,function(i,j){
		    	    	 	$("#bodyParams").append("<tr><th>"+j.name+"</th><th>"+j.defaultValue+"</th><th>"+j.require+"</th><th>"+j.type+"</th><th>"+j.remark+"</th></tr>")
		    	     });
		    	     
		    	     
		    	     $("#bodyVal").text("");
		    	     
		    	     $("#bodyVal").text(mi.bodyVal);
		    	  
	    	     }
	    	  }
	    });
	 

});
</script>
</body>
</html>
